<div style="width: 1150px;" class="dialog-mdsd-vh">
    <h1 mat-dialog-title style="display:inline-block;cursor: move" mat-dialog-draggable>{{'chart.config-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
    <div style="display: inline-block; width: 100%">
        <div class="panelTop">
            <mat-grid-list cols="3" rowHeight="100%">
                <mat-grid-tile class="chart-list">
                    <mat-list class="list" >
                        <mat-list-item class="list-item list-header">
                            <span>{{'chart.config-charts' | translate}}</span>
                            <mat-icon style="position: absolute; right: 10px;cursor:pointer;color:rgba(255, 255, 255, 0.9);" (click)="editChart(null)">add</mat-icon>
                        </mat-list-item>
                        <mat-list-item *ngFor="let chart of data.charts" matTooltip="{{chart.name}}" class="list-item list-item-text" [ngClass]="isChartSelected(chart)" (click)="selectedChart = chart;loadChartConfig();">
                            <span>{{chart.name}}</span>
                            <mat-icon [matMenuTriggerFor]="configMenu" style="position: absolute; right: 10px;cursor:pointer;color:gray;">more_vert</mat-icon>
                            <mat-menu #configMenu [overlapTrigger]="false" style="color:#000000">
                                <button mat-menu-item (click)="editChart(chart)" style="color:#000000;font-size: 14px;">{{'chart.config-rename' | translate}}</button>
                                <button mat-menu-item (click)="deleteChart(chart)" style="color:#000000;font-size: 14px;">{{'chart.config-delete' | translate}}</button>
                            </mat-menu>
                        </mat-list-item>
                    </mat-list>
                </mat-grid-tile>
                <mat-grid-tile class="device-list">
                    <mat-list class="list">
                        <mat-list-item class="list-item list-header">
                            <span>{{'chart.config-devices' | translate}}</span>
                        </mat-list-item>
                        <mat-list-item *ngFor="let device of data.devices;" matTooltip="{{device.name}}" class="list-item list-item-text" [ngClass]="isDeviceSelected(device)" (click)="selectDevice(device);">
                            <span>{{device.name}}</span>
                        </mat-list-item>
                    </mat-list>
                </mat-grid-tile>
                <mat-grid-tile class="tag-list">
                    <mat-list class="list">
                        <mat-list-item class="list-item list-header">
                            <span>{{'chart.config-tags' | translate}}</span>
                        </mat-list-item>
                        <mat-selection-list #selTags [(ngModel)]="selectedTags" [disabled]="(selectedChart.id)?false:true" (selectionChange)="tagSelectionChanged($event)" style="padding-top: 0px;">
                            <mat-list-option *ngFor="let tag of selectedDevice.tags" matTooltip="{{getTagLabel(tag)}}" [selected]="tag.selected" [value]="tag" class="list-item list-item-text" checkboxPosition="before">
                                {{getTagLabel(tag)}}
                            </mat-list-option>
                        </mat-selection-list>
                    </mat-list>
                </mat-grid-tile>
            </mat-grid-list>
        </div>
        <div class="panelBottom">
            <mat-list class="list">
                <mat-list-item class="list-item list-header">
                    <span>{{'chart.config-lines' | translate}}</span>
                </mat-list-item>
                <div style="height: calc(100% - 36px); overflow-y: auto">
                    <mat-list-item *ngFor="let tag of selectedChart.lines" class="list-item" (click)="editChartLine(tag)">
                        <mat-icon (click)="$event.stopPropagation();removeChartLine(tag)" style="color:gray;font-size: 20px">delete</mat-icon>
                        <div class="list-item-text" style="width: 50%;max-width: 50%;">
                            <span>{{getDeviceTagName(tag)}}</span>
                        </div>
                        <div class="list-item-text" style="width: 40%;max-width: 40%;">
                            <span>{{tag.device}}</span>
                        </div>
                        <div>
                            <input [(colorPicker)]="tag.color" class="color-line input-color" title="{{'chart.config-line-color' | translate}}"
                            [style.background]="tag.color" [cpAlphaChannel]="'always'" [cpPosition]="'top'" style="height:20px !important"
                            [cpPresetColors]="defaultColor" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                            [cpCancelButtonText]="'Cancel'" [cpOKButton]="true" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" />
                        </div>
                    </mat-list-item>
                </div>
            </mat-list>
        </div>
    </div>

    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>
